<template>
<div>
  <Card>
    <!-- 搜索 -->
    <t-row justify="space-between">
        <div class="left-operation-container">
          <t-form :data="formData" labelWidth="70px" :rules="rules" :colon="true" :requiredMark="false" :showErrorMessage="true" ref="form" layout="inline"  scrollToFirstError="smooth">
            <t-form-item label="搜索" help="请输入订单编号" name="search">
              <t-input v-model="formData.search" class="search-input" placeholder="请输入订单编号" clearable>
              <template #suffix-icon>
                <search-icon size="20px" />
              </template>
            </t-input>
            </t-form-item>
            <t-form-item label="订单状态" name="states">
              <t-select
                v-model="formData.states"
                style="width: 200px;"
                :options="states"
                clearable
                placeholder="请选择"
              >
                <icon
                  name="browse"
                  slot="prefixIcon"
                />
              </t-select>
            </t-form-item>
            <t-form-item label="订单分类" name="orders">
              <t-select
                v-model="formData.orders"
                style="width: 200px;"
                :options="orders"
                clearable
                placeholder="请选择"
              >
                <icon
                  name="browse"
                  slot="prefixIcon"
                />
              </t-select>
            </t-form-item>
            <t-form-item label="付款方式" name="payment">
              <t-select
                v-model="formData.payment"
                style="width: 200px;"
                :options="payment"
                clearable
                placeholder="请选择"
              >
                <icon
                  name="browse"
                  slot="prefixIcon"
                />
              </t-select>
            </t-form-item>
            <t-form-item label="支付路径" name="Paypath">
              <t-select
                v-model="formData.Paypath"
                style="width: 200px;"
                :options="Paypath"
                clearable
                placeholder="请选择"
              >
                <icon
                  name="browse"
                  slot="prefixIcon"
                />
              </t-select>
            </t-form-item>
             <t-form-item label="日期" name="datatime">
               <t-date-picker v-model="formData.datatime" theme="primary" mode="date" clearable></t-date-picker>
            </t-form-item>
          </t-form>
        </div>
        <div>
            <t-button @click="onSubmit"> 搜索 </t-button>
            <!-- :disabled="!selectedRowKeys.length" -->
            <t-button variant="base" theme="default" class="reset" @click="onReset"> 重置 </t-button>
             <!-- <t-button variant="base" theme="danger" class="reset" @click="deletelistall"> 删除 </t-button> -->
            <span v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</span>
        </div>
      </t-row>
    <!-- <video autoplay style="display: none;">
      <source src="https://webfs.tx.kugou.com/202203161756/738ebc5157c78a9b8c10057352f07275/KGTX/CLTX001/280a10d35262082db16dad1b816019fc.mp3"/>
    </video> -->
  </Card>
  <Card>
    <!-- 列表 -->
       <t-table
          rowKey="index"
          :data="dataall"
          :columns="columns"
          :pagination="pagination"
          :hover="true"
          :loading="dataLoading"
          @change="onChange"
          @page-change="onPageChange"
        >
          <template #status="{ row }">
            <t-tag v-if="row.status === 0" theme="warning" variant="light">进行中</t-tag>
            <t-tag v-if="row.status === 1" theme="success" variant="light">已完成</t-tag>
          </template>
          <template #op="slotProps">
             <t-button @click="handleClickDetail(slotProps)">详情</t-button>
              <t-button theme="danger" @click="handleClickDelete(slotProps)">删除</t-button>
          </template>
        </t-table>
  </Card>
  <Details ref="Details" :confirmBody="details"/>
    <t-dialog
      header="确认删除当前所选订单吗？"
      :body="confirmBody"
      :visible.sync="confirmVisible"
      @confirm="onConfirmDelete"
      :onCancel="onCancel"
    >
    </t-dialog>
</div>
</template>
<script>
import { prefix } from '@/config/global';
import { SearchIcon } from 'tdesign-icons-vue';
import Card from '@/components/card/index.vue';// 导入卡片, 组件没有卡片，需要自己导入
import { Icon } from 'tdesign-icons-vue'; // 导入icon
import Details from './details.vue' // 导入详情弹框

const INITIAL_DATA = {
  search: '', // 搜索
  states: '', // 订单状态
  Paypath: '', //支付路径
  orders: '', // 订单分类
  payment: '', // 付款方式
  datatime: '' // 时间
};

export default {
  name: 'Aboutagency',
  components: {
    SearchIcon,
    Card,
    Icon,
    Details
  },
  data() {
    return {
      confirmVisible: false, // 控制删除对话框显示
      formData: { ...INITIAL_DATA }, // form表单验证
      rules: {
        // 表单校验
      },
      indexdelete: 0, // 下标
      dataLoading: false, // 加载loding
      details: {}, // 详情数据
      selectedRowKeys: [],  // 列表页默认选中
      // 订单状态下拉选择器
      states: [
        { label: '待付款', value: '1' },
        { label: '已付款', value: '2' },
        { label: '未结账', value: '3' },
      ],
      // 订单分类下拉数据
      orders: [
        { label: '分类1', value: '1' },
        { label: '分类2', value: '2' },
        { label: '分类3', value: '3' },
      ],
      // 付款方式下拉数据
      payment: [
        { label: '微信', value: '1' },
        { label: '支付宝', value: '2' },
        { label: '银联', value: '3' },
        { label: '现金', value: '4' },
      ],
      // 支付路径下拉数据
      Paypath:[
        { label: '微信', value: '1' },
        { label: '支付宝', value: '2' },
        { label: '银联', value: '3' },
        { label: '现金', value: '4' },
      ],
      // 列表数据
      dataall: [],
      // 列表头部
       columns: [
        //  { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
        {
          width: 100,
          colKey: 'name',
          title: '名称',
          ellipsis: true,
        },
        {
          width: 300,
          colKey: 'no',
          title: '编号',
          ellipsis: true,
        },
        {
          width: 300,
          colKey: 'updateTime',
          title: '创建时间',
          ellipsis: true,
        },
        {
          width: 300,
          colKey: 'amount',
          title: '本局金额',
          ellipsis: true,
        },
        {
          colKey: 'adminName',
          title: '创建人',
          width: 200,
          ellipsis: true,
        },
        {
          colKey: 'timelength',
          title: '本局时间',
          width: 200,
          ellipsis: true,
        },
        {
          colKey: 'status',
          title: '本局状态',
          width: 200,
          ellipsis: true,
        },
        {
          align: 'left',
          fixed: 'right',
          width: 200,
          colKey: 'op',
          title: '操作',
        },
      ],
      pagination: {
          defaultPageSize: 20,
          total: 0,
          defaultCurrent: 1,
      },
    };
  },
  computed: {
    confirmBody() {
      if (this.indexdelete > -1) {
        if (this.dataall.length != 0) {
          const name = this.dataall[this.indexdelete].name
          return `删除后，${name}的订单信息将被清空，且无法恢复`;
        }
      }
      return '';
    },
  },
  mounted () {
    this.listdata()
    this.play()
  },
  methods: {
    // 自动播放
    play() {
        // var music = this.$refs.audios;
        //判断如果音乐停止播放中，就让他播放。。。
        // console.log(music.paused);
        // if (music.paused) {
        //     music.paused = false;
        //     music.play();
        // }
    },
    // form表单重置
    onReset() {
      this.$refs.form.reset();
      this.$message.success('重置成功');
      // this.formData = {
      //     search: '', // 搜索
      //     states: '', // 订单状态
      //     Paypath: '', //支付路径
      //     orders: '', // 订单分类
      //     payment: '', // 付款方式
      // };
    },

    // 表单提交发送请求
    onSubmit({ validateResult, firstError }) {
      // if (validateResult === true) {
      //   this.$message.success('提交成功');
      // } else {
      //   console.log('Errors: ', validateResult);
      //   this.$message.warning(firstError);
      // }
      this.listdata();
      this.$message.success('搜索成功')
    },

    rehandlePageChange(curr, pageInfo) {
      console.log('分页变化', curr, pageInfo);
    },

    // 分页、排序、过滤等操作触发均会触发 change 事件
    onChange(params, context) {
      console.log('change:', params, context);
    },

    // 分页变化时触发该事件
    onPageChange(pageInfo) {
      console.log('page-change:', pageInfo);
    },
    
    // 获取列表数据
    listdata () {
      // /api/office-management
      this.dataLoading = true;
      this.$request.get('/api/office-management').then((res) => {
        // console.log(res,'res');
        if (res.data.code == 200) {
          this.dataLoading = false;
          const list = res.data.data.list.length
          this.dataall = res.data.data.list
          this.pagination = {
            ...this.pagination,
            // defaultCurrent: 1,
            total: list,
          };
          // this.pagination.defaultCurrent = 1
        }
        // console.log(this.dataall);
      }).catch((e) => {
        console.log(e);
      })
    },

    // 查看详情
    handleClickDetail (rowlist) {
      this.details = rowlist.row
      this.$refs.Details.visible = true
    },

    // 删除
    handleClickDelete (slotProps) {
      this.indexdelete = slotProps.rowIndex
      this.confirmVisible = true;
      // this.dataall.splice(slotProps.rowIndex,1)
      // this.pagination.total = this.dataall.length;
    },

    // 列表删除
    onConfirmDelete() {
      // 真实业务请发起请求
      this.data.splice(this.indexdelete, 1);
      this.pagination.total = this.dataall.length;
      const selectedIdx = this.selectedRowKeys.indexOf(this.this.indexdelete);
      console.log(selectedIdx);
      if (selectedIdx > -1) {
        this.selectedRowKeys.splice(selectedIdx, 1);
      }
      // console.log(this.$router);
      this.confirmVisible = false;
      this.$message.success('删除成功');
      this.resetIdx();
    },

    onCancel() {
      this.resetIdx();
    },

    resetIdx() {
      this.indexdelete = -1;
    },
  },
};
</script>
<style lang="less" scoped>
@import './index';
.card-container {
  margin-top: 10px;
}
.t-form-inline {
  margin-bottom: 10px;
}
</style>
